<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
        <span style="margin-left: 10px">设置规则</span>
      </div>
      <el-form :model="ruleForm2" style="width: 100%" ref="ruleForm2" label-width="100px">
        <div class="title">
          <span>培训规则设置</span>
        </div>
        <el-form-item label="人脸识别设置" prop="face">
          <el-radio v-model="ruleForm2.face" :label="1">每次先认证，后学习</el-radio>
          <el-radio v-model="ruleForm2.face" :label="0">首次学习时认证</el-radio>
        </el-form-item>
        <el-form-item label="人脸识别频率" prop="frequency">
          <span style="font-size: 12px">在线学习时，每</span>
          <el-input-number
            :controls="false"
            :min="1"
            style="width: 80px; margin: 0 5px"
            v-model="ruleForm2.frequency"
            label="请输入"
          ></el-input-number>
          <span style="font-size: 12px">分钟，认证一次</span>
        </el-form-item>
      </el-form>
      <el-form
        :model="ruleForm"
        style="width: 100%; margin-bottom: 60px"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
        inline
      >
        <div class="title">
          <span>考试规则设置</span>
        </div>
        <el-form-item label="合格分数" prop="qualified">
          <el-input-number
            :controls="false"
            :min="1"
            style="width: 400px"
            v-model="ruleForm.qualified"
            label="请输入合格分数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="不合格补考次数" prop="makeUp">
          <el-radio v-model="ruleForm.makeUp" :label="0">不限</el-radio>
          <el-radio v-model="ruleForm.makeUp" :label="1">限制</el-radio>
          <span style="font-size: 12px">考试连续</span>
          <el-input-number
            :disabled="ruleForm.makeUp == 0"
            :controls="false"
            :min="1"
            style="width: 80px; margin: 0 5px"
            v-model="ruleForm.number"
            label="请输入"
          ></el-input-number>
          <span style="font-size: 12px">次不合格，重新培训</span>
        </el-form-item>
        <br />
        <el-form-item label="单选题数量" prop="radio">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.radio"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="单选题分数" prop="radioScore">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.radioScore"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="多选题数量" prop="multi">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.multi"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="多选题每题分数" prop="multiScore">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.multiScore"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="少选，所选的每个选项" prop="few">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 810px"
            v-model="ruleForm.few"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="判断题数量" prop="judge">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.judge"
            label="请输入"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="判断题每题分数" prop="judgeScore">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 400px"
            v-model="ruleForm.judgeScore"
            label="请输入"
          ></el-input-number>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button @click="back">关闭</el-button>
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
export default {
  name: 'addCourseware',
  data() {
    return {
      ruleForm2: {
        face: 1,
        frequency: null,
      },
      ruleForm: {
        qualified: null,
        makeUp: 0,
        number: null,
        radio: null,
        radioScore: null,
        multi: null,
        multiScore: null,
        few: null,
        judge: null,
        judgeScore: null,
      },
      rules: {
        qualified: [{ required: true, message: '请输入合格分数', trigger: 'blur' }],
        radio: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
        radioScore: [{ required: true, message: '请输入单选题分数', trigger: 'blur' }],
        multi: [{ required: true, message: '请输入多选题数量', trigger: 'blur' }],
        multiScore: [{ required: true, message: '请输入多选题每题分数', trigger: 'blur' }],
        few: [{ required: true, message: '请输入少选，所选的每个选项', trigger: 'blur' }],
        judge: [{ required: true, message: '请输入判断题数量', trigger: 'blur' }],
        judgeScore: [{ required: true, message: '请输入判断题每题分数', trigger: 'blur' }],
        makeUp: [{ required: true, message: '请选择补考次数', trigger: 'change' }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.title > span {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.demo-ruleForm /deep/ .el-form-item__label {
  line-height: 14px;
}
.flex {
  display: flex;
  align-items: center;
}
.footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 210px;
  border-top: 1px solid #e6e6e6;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
</style>
